---
target: Umo Editor
keywords: Umo Editor,Tiptap,富文本编辑器,文档编辑器,文档编辑,协同办公,开源编辑器,国产编辑器
description: Umo Editor 是一个基于 Vue3 和 Tiptap 的本土化开源文档编辑器，专为国人用户设计。它提供了强大的文档编辑能力和 AI 创作功能，支持分页模式、Markdown 语法、富文本编辑、多种格式的节点插入、页面样式设置、文档导出与打印等功能。此外，Umo Editor 还支持自定义扩展、多语言设置和暗色主题。
---

import { Tabs,Callout } from 'nextra/components'
import { Badge } from '/components/badge'

# AI 文档助手 

用于配置 AI 文档助手的相关信息，更多信息见[AI 文档助手](../ai)。<Badge theme="success">v3.0.0 新增</Badge>

<Callout type="error" emoji="❗">
**注意：** 原 `assistant` 配置在 `v6.0.0` 版本中已被更改为 `ai.assistant`，同时，`onAssistant` 方法改为 `ai.assistant.onMessage`，请及时调整。
</Callout>

在 Umo Editor Next 版本中，我们提供了更为强大的 AI 聊天助手功能，详见[Umo Editor Next 配置项](../../next/chat#aichat)。

## 默认配置

```js
{
  ai:{
    assistant: {
      enabled: false,
      maxlength: 100,
      commands: [
        {
          label: { en_US: 'Continuation', zh_CN: '续写' },
          value: { en_US: 'Continuation', zh_CN: '续写' },
        },
        {
          label: { en_US: 'Rewrite', zh_CN: '重写' },
          value: { en_US: 'Rewrite', zh_CN: '重写' },
        },
        {
          label: { en_US: 'Abbreviation', zh_CN: '缩写' },
          value: { en_US: 'Abbreviation', zh_CN: '缩写' },
        },
        {
          label: { en_US: 'Expansion', zh_CN: '扩写' },
          value: { en_US: 'Expansion', zh_CN: '扩写' },
        },
        {
          label: { en_US: 'Polish', zh_CN: '润色' },
          value: { en_US: 'Polish', zh_CN: '润色' },
        },
        {
          label: { en_US: 'Proofread', zh_CN: '校阅' },
          value: { en_US: 'Proofread', zh_CN: '校阅' },
        },
        {
          label: { en_US: 'Translate', zh_CN: '翻译' },
          value: { en_US: 'Translate to chinese', zh_CN: '翻译成英文' },
          autoSend: false,
        },
      ],
      async onMessage() {
        return await new Promise((_, reject) => {
          reject(
            new Error(
              'Key "ai": Key "assistant": Key "onMessage": Please set the onMessage method',
            ),
          )
        })
      },
    },
  },
}
```

## 配置项说明

### ai.assistant.enabled

**说明**：是否开启 AI 文档助手功能。

**类型**：`Boolean`

**默认值**：`false`

### ai.assistant.maxlength

**说明**：AI 文档助手最大运行输入的命令长度。

**类型**：`Number`

**默认值**：`100`

### ai.assistant.commands

**说明**：AI 文档助手面板中常用指令配置。

**类型**：`Array`

**默认值**：

```js
[
  {
    label: { en_US: 'Continuation', zh_CN: '续写' },
    value: { en_US: 'Continuation', zh_CN: '续写' },
  },
  {
    label: { en_US: 'Rewrite', zh_CN: '重写' },
    value: { en_US: 'Rewrite', zh_CN: '重写' },
  },
  {
    label: { en_US: 'Abbreviation', zh_CN: '缩写' },
    value: { en_US: 'Abbreviation', zh_CN: '缩写' },
  },
  {
    label: { en_US: 'Expansion', zh_CN: '扩写' },
    value: { en_US: 'Expansion', zh_CN: '扩写' },
  },
  {
    label: { en_US: 'Polish', zh_CN: '润色' },
    value: { en_US: 'Polish', zh_CN: '润色' },
  },
  {
    label: { en_US: 'Proofread', zh_CN: '校阅' },
    value: { en_US: 'Proofread', zh_CN: '校阅' },
  },
  {
    label: { en_US: 'Translate', zh_CN: '翻译' },
    value: { en_US: 'Translate to chinese', zh_CN: '翻译成英文' },
    autoSend: false,
  },
]
```

**配置项**：

- `item.label`: `String` 或 `Object`，AI 文档助手面板中显示的文案。
- `item.value`: `String` 或 `Object`，发送给 `onMessage` 的实际指令。
- `item.autoSend`: `Boolean`，在用户选择该指令时，是否自动向 `onMessage` 发送指令，默认为 `true`，设为 `false` 时，用户可以修改该指令后，手动点击按钮发送指令。


### ai.assistant.onMessage

**说明**：配置 AI 文档助手返回数据的方法，更多信息见[AI 文档助手](../ai)。

**类型**：`AsyncFunction`、 `Promise`。

**参数**：

- `payload`：AI 文档助手的请求参数，可以将这些信息传递给 AI 模型。
  1. `payload.lang`：`String`，当前界面语言。
  2. `payload.input`：`String`，用户选择的文本内容。
  3. `payload.command`：`String`，用户输入的指令。
  4. `payload.output`：`String`，AI 文档助手希望得到的内容格式，可能的值：`rich-text`、`text`。
- `content`：当前文档内容。可以将文档内容传递给 AI 模型，但是注意，过长的文档可能会导致 AI 模型无法处理。如果使用的是商业 AI 模型，过长的 Token 输入，也会导致计费也会剧增。
  1. `content.text`：`String`，当前文档的文本内容。
  2. `content.html`：`String`，当前文档的 HTML 内容。
  3. `content.json`：`Object`，当前文档的 JSON 内容。

**示例**：

以下示例以调用 OpenAI 模型为例，演示如何配置 `onMessage` 方法，将文档内容传递给 AI 模型，处理并返回 AI 模型的返回结果。

OpenAI 的接口规范已成为事实上的行业规范，实际上，很多 AI 模型都支持通过[`OpenAI SDK`](https://www.npmjs.com/package/openai)调用。

<Tabs items={['全局配置', 'SFC 配置']}>
<Tabs.Tab>
```js
import { useUmoEditor } from '@umoteam/editor'
import OpenAI from 'openai'

const onMessage = async (payload, content) => {
  console.log(payload, content)
  const { command, lang, input, output } = payload
  const client = new OpenAI({
    baseURL: '...',
    apiKey: '...',
    dangerouslyAllowBrowser: true, // 允许在浏览器中使用 OpenAI SDK
  })
  const langs = {
    'en-US': '英文',
    'zh-CN': '中文',
  }
  const options = {
    stream: true,
    model: '...',
    messages: [
      {
        role: 'system',
        content: `你是一个文档助手，根据用户输入的文本或者HTML内容，以及对应操作指令，生成符合要求的文档内容。要求如下：1.如果指令不是要求翻译内容，请使用${langs[lang]}返回，否则按用户要求翻译的语言返回；2.返回${output === 'rich-text' ? '富文本（HTML）' : '纯文本（剔除内容中的HTML标记）'}格式；3.如果用户输入的指令你不能理解，在返回的内容前加上“[ERROR]: ”，4.除此之外不返回任何其他多余的内容。`,
      },
      {
        role: 'user',
        content: `对以下内容进行：【${command}】操作。\n${input}`,
      },
    ],
  }
  const completion = await client.chat.completions.create(options)
  const stream = new ReadableStream({
    async start(controller) {
      for await (const chunk of completion) {
        controller.enqueue(chunk.choices[0]?.delta?.content || '')
      }
      controller.close()
    },
  })
  return stream
}

const options = {
  ai: {
    assistant: {
      onMessage,
    },
  },
};

app.use(useUmoEditor, options)
```
</Tabs.Tab>
<Tabs.Tab>
```vue
<template>
  <umo-editor 
    v-bind="options"
  />
</template>
 
<script setup>
import { UmoEditor } from '@umoteam/editor'
import OpenAI from 'openai'

const onMessage = async (payload, content) => {
  console.log(payload, content)
  const { command, lang, input, output } = payload
  const client = new OpenAI({
    baseURL: '...',
    apiKey: '...',
    dangerouslyAllowBrowser: true, // 允许在浏览器中使用 OpenAI SDK
  })
  const langs = {
    'en-US': '英文',
    'zh-CN': '中文',
  }
  const options = {
    stream: true,
    model: '...',
    messages: [
      {
        role: 'system',
        content: `你是一个文档助手，根据用户输入的文本或者HTML内容，以及对应操作指令，生成符合要求的文档内容。要求如下：1.如果指令不是要求翻译内容，请使用${langs[lang]}返回，否则按用户要求翻译的语言返回；2.返回${output === 'rich-text' ? '富文本（HTML）' : '纯文本（剔除内容中的HTML标记）'}格式；3.如果用户输入的指令你不能理解，在返回的内容前加上“[ERROR]: ”，4.除此之外不返回任何其他多余的内容。`,
      },
      {
        role: 'user',
        content: `对以下内容进行：【${command}】操作。\n${input}`,
      },
    ],
  }
  const completion = await client.chat.completions.create(options)
  const stream = new ReadableStream({
    async start(controller) {
      for await (const chunk of completion) {
        controller.enqueue(chunk.choices[0]?.delta?.content || '')
      }
      controller.close()
    },
  })
  return stream
}

const options = {
  ai: {
    assistant: {
      onMessage,
    },
  },
}
</script>
```
</Tabs.Tab>
</Tabs>

<Callout type="error">
**注意：** 以上代码仅作为示例使用，实际应用中，不应将 `apiKey` 等敏感信息暴露在客户端，应通过后端服务调用 AI 模型，并将 `apiKey` 放在后端服务中，以保护敏感信息。以上代码逻辑也应尽可能的放在后端服务中，以减少请求负载。
</Callout>

**返回值**：`String`、`ReadableStream`。
